<template>
  <div class="profile-page" v-loading="loading">
    <!-- 背景装饰 -->
    <!-- <div class="profile-background">
      <div class="bg-pattern"></div>
    </div> -->

    <!-- 用户信息头部 -->
    <div class="profile-header">
      <div class="header-content">
        <!-- 用户基本信息 -->
        <div class="user-main-info">
          <div class="avatar-section">
            <el-avatar
              :size="100"
              :src="getMediaUrl(userInfo?.avatar)"
              class="user-avatar"
            >
              {{ userInfo?.nickname?.charAt(0) || userInfo?.username?.charAt(0) }}
            </el-avatar>
            <div v-if="userInfo?.isVip" class="vip-badge">
              <el-icon><Medal /></el-icon>
            </div>
          </div>

          <div class="user-info">
            <div class="name-section">
              <h1 class="user-name">{{ userInfo?.nickname || userInfo?.username }}</h1>
              <div class="user-badges" v-if="userInfo?.isVerified || userInfo?.level">
                <el-tag v-if="userInfo?.isVerified" type="success" size="small" class="verified-badge">
                  <el-icon><CircleCheck /></el-icon>
                  Certified
                </el-tag>
                <el-tag v-if="userInfo?.level" type="info" size="small" class="level-badge">
                  Lv.{{ userInfo.level }}
                </el-tag>
              </div>
            </div>

            <div class="user-headline" v-if="userInfo?.bio">
              {{ userInfo.bio }}
            </div>

            <div class="user-meta" v-if="userInfo?.profession || userInfo?.education || userInfo?.location || userInfo?.createdTime">
              <div class="meta-row" v-if="userInfo?.profession || userInfo?.education">
                <span v-if="userInfo?.profession" class="meta-item">
                  <el-icon><Briefcase /></el-icon>
                  {{ userInfo.profession }}
                </span>
                <span v-if="userInfo?.education" class="meta-item">
                  <el-icon><School /></el-icon>
                  {{ userInfo.education }}
                </span>
              </div>
              <div class="meta-row" v-if="userInfo?.location || userInfo?.createdTime">
                <span v-if="userInfo?.location" class="meta-item">
                  <el-icon><Location /></el-icon>
                  {{ userInfo.location }}
                </span>
                <span v-if="userInfo?.createdTime" class="meta-item">
                  <el-icon><Calendar /></el-icon>
                  {{ formatTime(userInfo.createdTime, 'YYYY年MM月') }} Join Quora
                </span>
              </div>
            </div>
          </div>
        </div>

        <!-- 操作按钮 -->
        <div class="action-section">
          <div class="action-buttons">
            <el-button
              v-if="isCurrentUser"
              type="primary"
              size="large"
              @click="goToEdit"
            >
              Edit profile
            </el-button>
            <template v-else>
              <el-button
                :type="userInfo?.isFollowing ? 'default' : 'primary'"
                size="large"
                @click="handleFollow"
              >
                <el-icon v-if="!userInfo?.isFollowing"><Plus /></el-icon>
                {{ userInfo?.isFollowing ? 'Followed' : 'Follow him' }}
              </el-button>
              <el-button size="large" @click="handleMessage">
                <el-icon><ChatDotRound /></el-icon>
                send a private message
              </el-button>
            </template>
          </div>
        </div>
      </div>
    </div>

    <!-- 数据统计 -->
    <div class="stats-section">
      <div class="stats-container">
        <div class="stat-item" @click="showFollowers">
          <div class="stat-number">{{ formatCount(userInfo?.followerCount || 0) }}</div>
          <div class="stat-label">Followers</div>
        </div>
        <div class="stat-divider"></div>
        <div class="stat-item" @click="showFollowing">
          <div class="stat-number">{{ formatCount(userInfo?.followingCount || 0) }}</div>
          <div class="stat-label">Followed</div>
        </div>
        <div class="stat-divider"></div>
        <div class="stat-item">
          <div class="stat-number">{{ formatCount(userInfo?.postCount || 0) }}</div>
          <div class="stat-label">Content</div>
        </div>
        <div class="stat-divider"></div>
        <div class="stat-item">
          <div class="stat-number">{{ formatCount(userInfo?.likeCount || 0) }}</div>
          <div class="stat-label">Get likes</div>
        </div>
      </div>
    </div>

    <!-- 个人简介卡片 -->
    <div class="profile-intro-section" v-if="userInfo?.bio">
      <div class="intro-container">
        <!-- 个人介绍 -->
        <div class="intro-card">
          <div class="card-title">
            <el-icon><Document /></el-icon>
            personal introduction
          </div>
          <div class="intro-content">
            {{ userInfo.bio }}
          </div>
        </div>
      </div>
    </div>

    <!-- 内容导航 -->
    <div class="content-nav">
      <div class="nav-container">
        <div class="nav-tabs">
          <div
            v-for="tab in contentTabs"
            :key="tab.name"
            class="nav-tab"
            :class="{ active: activeTab === tab.name }"
            @click="switchTab(tab.name)"
          >
            <span class="tab-label">{{ tab.label }}</span>
            <span class="tab-count" v-if="tab.count !== undefined">{{ tab.count }}</span>
          </div>
        </div>
      </div>
    </div>

    <!-- 内容区域 -->
    <div class="content-section">
      <div class="content-container">
        <!-- 回答 -->
        <div v-if="activeTab === 'answers'" class="tab-content">
          <div class="content-list">
            <div v-if="answers.length === 0" class="empty-content">
              <div class="empty-icon">💡</div>
              <div class="empty-text">haven't answered yet</div>
              <div class="empty-desc">{{ isCurrentUser ? 'Go and answer the questions you are interested in' : 'TA has not yet provided any response' }}</div>
            </div>
            <div v-else>
              <div
                v-for="answer in answers"
                :key="answer.id"
                class="content-item"
                @click="goToAnswerDetail(answer)"
              >
                <div class="content-header">
                  <h3 class="content-title">{{ answer.questionTitle }}</h3>
                  <div class="content-meta">
                    <span class="content-time">{{ formatTime(answer.createdTime) }}</span>
                  </div>
                </div>
                <div class="content-summary">{{ answer.summary }}</div>
                <div class="content-stats">
                  <span class="stat-item">
                    <el-icon><View /></el-icon>
                    {{ formatCount(answer.viewCount || 0) }}
                  </span>
                  <span class="stat-item">
                    <el-icon><Star /></el-icon>
                    {{ formatCount(answer.likeCount || 0) }}
                  </span>
                  <span class="stat-item">
                    <el-icon><ChatDotRound /></el-icon>
                    {{ formatCount(answer.commentCount || 0) }}
                  </span>
                </div>
              </div>
              <!-- 加载更多按钮 -->
              <div class="load-more-section" v-if="pagination.answers?.hasMore">
                <el-button
                  @click="loadMore('answers')"
                  :loading="pagination.answers?.loading"
                  type="primary"
                  text
                >
                  {{ pagination.answers?.loading ? 'Loading...' : 'Load more' }}
                </el-button>
              </div>
            </div>
          </div>
        </div>

        <!-- 文章 -->
        <div v-if="activeTab === 'articles'" class="tab-content">
          <div class="content-list">
            <div v-if="articles.length === 0" class="empty-content">
              <div class="empty-icon">📄</div>
              <div class="empty-text">haven't written any articles yet</div>
              <div class="empty-desc">{{ isCurrentUser ? 'Go and write the first article' : 'TA hast published any articles yet' }}</div>
            </div>
            <div v-else>
              <div
                v-for="article in articles"
                :key="article.id"
                class="content-item"
                @click="goToArticleDetail(article)"
              >
                <div class="content-header">
                  <h3 class="content-title">{{ article.title }}</h3>
                  <div class="content-meta">
                    <span class="content-time">{{ formatTime(article.createdTime) }}</span>
                  </div>
                </div>
                <div class="content-summary">{{ article.summary }}</div>
                <div class="content-stats">
                  <span class="stat-item">
                    <el-icon><View /></el-icon>
                    {{ formatCount(article.viewCount || 0) }}
                  </span>
                  <span class="stat-item">
                    <el-icon><Star /></el-icon>
                    {{ formatCount(article.likeCount || 0) }}
                  </span>
                  <span class="stat-item">
                    <el-icon><ChatDotRound /></el-icon>
                    {{ formatCount(article.commentCount || 0) }}
                  </span>
                </div>
              </div>
              <!-- 加载更多按钮 -->
              <div class="load-more-section" v-if="pagination.articles?.hasMore">
                <el-button
                  @click="loadMore('articles')"
                  :loading="pagination.articles?.loading"
                  type="primary"
                  text
                >
                  {{ pagination.articles?.loading ? 'Loading...' : 'Load more' }}
                </el-button>
              </div>
            </div>
          </div>
        </div>

        <!-- 问题 -->
        <div v-if="activeTab === 'questions'" class="tab-content">
          <div class="content-list">
            <div v-if="questions.length === 0" class="empty-content">
              <div class="empty-icon">❓</div>
              <div class="empty-text">haven't asked any questions yet</div>
              <div class="empty-desc">{{ isCurrentUser ? 'Go and ask the first question' : 'TA has not yet provided any question' }}</div>
            </div>
            <div v-else>
              <div
                v-for="question in questions"
                :key="question.id"
                class="content-item"
                @click="goToQuestionDetail(question)"
              >
                <div class="content-header">
                  <h3 class="content-title">{{ question.title }}</h3>
                  <div class="content-meta">
                    <span class="content-time">{{ formatTime(question.createdTime) }}</span>
                  </div>
                </div>
                <div class="content-summary">{{ question.summary }}</div>
                <div class="content-stats">
                  <span class="stat-item">
                    <el-icon><View /></el-icon>
                    {{ formatCount(question.viewCount || 0) }}
                  </span>
                  <span class="stat-item">
                    <el-icon><Star /></el-icon>
                    {{ formatCount(question.likeCount || 0) }}
                  </span>
                  <span class="stat-item">
                    <el-icon><ChatDotRound /></el-icon>
                    {{ formatCount(question.commentCount || 0) }}
                  </span>
                </div>
              </div>
              <!-- 加载更多按钮 -->
              <div class="load-more-section" v-if="pagination.questions?.hasMore">
                <el-button
                  @click="loadMore('questions')"
                  :loading="pagination.questions?.loading"
                  type="primary"
                  text
                >
                  {{ pagination.questions?.loading ? 'Loading...' : 'Load more' }}
                </el-button>
              </div>
            </div>
          </div>
        </div>

        <!-- 专栏 -->
        <div v-if="activeTab === 'columns'" class="tab-content">
          <div class="content-list">
            <div v-if="columns.length === 0" class="empty-content">
              <div class="empty-icon">📚</div>
              <div class="empty-text">haven't created any columns yet</div>
              <div class="empty-desc">{{ isCurrentUser ? 'Go and create the first column' : 'TA has not yet created any column' }}</div>
            </div>
            <div v-else>
              <div
                v-for="column in columns"
                :key="column.id"
                class="content-item"
                @click="goToColumnDetail(column)"
              >
                <div class="content-header">
                  <h3 class="content-title">{{ column.title }}</h3>
                  <div class="content-meta">
                    <span class="content-time">{{ formatTime(column.createdTime) }}</span>
                  </div>
                </div>
                <div class="content-summary">{{ column.summary }}</div>
                <div class="content-stats">
                  <span class="stat-item">
                    <el-icon><Document /></el-icon>
                    {{ formatCount(column.articleCount || 0) }} articles
                  </span>
                  <span class="stat-item">
                    <el-icon><Star /></el-icon>
                    {{ formatCount(column.followerCount || 0) }} follow
                  </span>
                </div>
              </div>
              <!-- 加载更多按钮 -->
              <div class="load-more-section" v-if="pagination.columns?.hasMore">
                <el-button
                  @click="loadMore('columns')"
                  :loading="pagination.columns?.loading"
                  type="primary"
                  text
                >
                  {{ pagination.columns?.loading ? 'Loading...' : 'Load more' }}
                </el-button>
              </div>
            </div>
          </div>
        </div>

        <!-- 收藏 -->
        <div v-if="activeTab === 'collections'" class="tab-content">
          <div class="content-list">
            <div v-if="collections.length === 0" class="empty-content">
              <div class="empty-icon">⭐</div>
              <div class="empty-text">haven't collected any content yet</div>
              <div class="empty-desc">{{ isCurrentUser ? 'Go and collect the content you are interested in' : 'TA has not yet collected any content' }}</div>
            </div>
            <div v-else>
              <div
                v-for="collection in collections"
                :key="collection.id"
                class="content-item"
                @click="goToCollectionDetail(collection)"
              >
                <div class="content-header">
                  <h3 class="content-title">
                    <span class="content-type-badge">{{ getContentTypeName(collection.contentType) }}</span>
                    {{ collection.title || collection.questionTitle }}
                  </h3>
                  <div class="content-meta">
                    <span class="content-time">collected at {{ formatTime(collection.createdTime) }}</span>
                  </div>
                </div>
                <div class="content-summary">{{ collection.summary }}</div>
                <div class="content-stats">
                  <span class="stat-item">
                    <el-icon><View /></el-icon>
                    {{ formatCount(collection.viewCount || 0) }}
                  </span>
                  <span class="stat-item">
                    <el-icon><Star /></el-icon>
                    {{ formatCount(collection.likeCount || 0) }}
                  </span>
                  <span class="stat-item">
                    <el-icon><ChatDotRound /></el-icon>
                    {{ formatCount(collection.commentCount || 0) }}
                  </span>
                </div>
              </div>
              <!-- 加载更多按钮 -->
              <div class="load-more-section" v-if="pagination.collections?.hasMore">
                <el-button
                  @click="loadMore('collections')"
                  :loading="pagination.collections?.loading"
                  type="primary"
                  text
                >
                  {{ pagination.collections?.loading ? 'Loading...' : 'Load more' }}
                </el-button>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import {computed, onMounted, ref} from 'vue'
import {useRoute, useRouter} from 'vue-router'
import {ElMessage} from 'element-plus'
import {
  Briefcase,
  Calendar,
  ChatDotRound,
  CircleCheck,
  Document,
  Location,
  Medal,
  Plus,
  School,
  Star,
  View
} from '@element-plus/icons-vue'
import {useUserStore} from '@/stores/user'
import {getUserContents, getUserProfile, toggleFollowUser} from '@/api/user'
import {getMediaUrl} from '@/utils/media'
import {formatCount, formatTime} from '@/utils/format'

const route = useRoute()
const router = useRouter()
const userStore = useUserStore()

// 响应式数据
const loading = ref(false)
const userInfo = ref(null)
const activeTab = ref('answers')

// 内容数据
const activities = ref([])
const answers = ref([])
const articles = ref([])
const questions = ref([])
const columns = ref([])
const collections = ref([])

// 分页数据
const pagination = ref({
  answers: { pageNum: 1, hasMore: true, loading: false },
  articles: { pageNum: 1, hasMore: true, loading: false },
  questions: { pageNum: 1, hasMore: true, loading: false },
  columns: { pageNum: 1, hasMore: true, loading: false },
  collections: { pageNum: 1, hasMore: true, loading: false }
})

// 实际内容数量（基于后端返回的total值）
const actualCounts = ref({
  answers: 0,
  articles: 0,
  questions: 0,
  columns: 0,
  collections: 0
})

// 内容标签页配置
const contentTabs = computed(() => {
  const tabs = [
    {
      name: 'answers',
      label: 'answers',
      count: actualCounts.value.answers || userInfo.value?.answerCount || 0
    },
    {
      name: 'articles',
      label: 'articles',
      count: actualCounts.value.articles || userInfo.value?.articleCount || 0
    },
    {
      name: 'questions',
      label: 'questions',
      count: actualCounts.value.questions || userInfo.value?.questionCount || 0
    },
    {
      name: 'columns',
      label: 'columns',
      count: actualCounts.value.columns || userInfo.value?.columnCount || 0
    }
  ]

  // 只有当前用户可以查看自己的收藏
  if (isCurrentUser.value) {
    tabs.push({
      name: 'collections',
      label: 'collections',
      count: actualCounts.value.collections || userInfo.value?.collectionCount || 0
    })
  }

  return tabs
})

// 计算属性
const isCurrentUser = computed(() => {
  return userStore.isLoggedIn && userStore.userInfo?.userId === userInfo.value?.userId
})

// 生命周期
onMounted(() => {
  loadUserInfo()
})

// 方法
const loadUserInfo = async () => {
  const userId = route.params.id
  if (!userId) {
    ElMessage.error('用户ID不能为空')
    router.push('/')
    return
  }

  loading.value = true
  try {
    const response = await getUserProfile(userId)
    if (response.code === 200) {
      userInfo.value = response.data

      // 加载对应标签页内容
      loadTabContent(activeTab.value)
    } else {
      ElMessage.error(response.message || '获取用户信息失败')
      router.push('/')
    }
  } catch (error) {
    console.error('获取用户信息失败:', error)
    ElMessage.error('获取用户信息失败')
    router.push('/')
  } finally {
    loading.value = false
  }
}

const loadTabContent = async (tabName, pageNum = 1, pageSize = 20) => {
  if (!userInfo.value) return

  // 设置加载状态
  if (pagination.value[tabName]) {
    pagination.value[tabName].loading = true
  }

  const userId = userInfo.value.userId
  const contentTypeMap = {
    'questions': 1,
    'answers': 2,
    'articles': 3,
    'columns': 4,
    'collections': 5
  }

  try {
    const response = await getUserContents(userId, {
      pageNum: pageNum,
      pageSize: pageSize,
      contentType: contentTypeMap[tabName],
      sortType: 1 // 默认按最新排序
    })

    if (response.code === 200) {
      const data = response.data.data || []
      const total = response.data.total || 0
      const hasMore = pageNum * pageSize < total

      switch (tabName) {
        case 'questions':
          questions.value = pageNum === 1 ? data : [...questions.value, ...data]
          actualCounts.value.questions = total
          break
        case 'answers':
          answers.value = pageNum === 1 ? data : [...answers.value, ...data]
          actualCounts.value.answers = total
          break
        case 'articles':
          articles.value = pageNum === 1 ? data : [...articles.value, ...data]
          actualCounts.value.articles = total
          break
        case 'columns':
          columns.value = pageNum === 1 ? data : [...columns.value, ...data]
          actualCounts.value.columns = total
          break
        case 'collections':
          collections.value = pageNum === 1 ? data : [...collections.value, ...data]
          actualCounts.value.collections = total
          break
      }

      // 更新分页信息
      if (pagination.value[tabName]) {
        pagination.value[tabName].pageNum = pageNum
        pagination.value[tabName].hasMore = hasMore
      }
    }
  } catch (error) {
    console.error('加载内容失败:', error)
  } finally {
    // 清除加载状态
    if (pagination.value[tabName]) {
      pagination.value[tabName].loading = false
    }
  }
}

const switchTab = (tabName) => {
  activeTab.value = tabName

  // 重置分页状态
  if (pagination.value[tabName]) {
    pagination.value[tabName].pageNum = 1
    pagination.value[tabName].hasMore = true
  }

  loadTabContent(tabName, 1)
}

const goToEdit = () => {
  router.push('/people/edit')
}

const handleFollow = async () => {
  if (!userInfo.value) return

  try {
    const response = await toggleFollowUser(userInfo.value.userId)
    if (response.code === 200) {
      userInfo.value.isFollowing = response.data
      if (response.data) {
        userInfo.value.followerCount = (userInfo.value.followerCount || 0) + 1
        ElMessage.success('Followed successfully')
      } else {
        userInfo.value.followerCount = Math.max(0, (userInfo.value.followerCount || 0) - 1)
        ElMessage.success('Unfollowed')
      }
    } else {
      ElMessage.error(response.message || '操作失败')
    }
  } catch (error) {
    console.error('关注操作失败:', error)
    ElMessage.error('操作失败')
  }
}

const handleMessage = () => {
  if (!userStore.isLoggedIn) {
    ElMessage.warning('请先登录')
    router.push('/login')
    return
  }

  // 跳转到私信页面，并传递用户ID参数
  router.push({
    path: '/messages',
    query: {
      userId: route.params.id
    }
  })
}

const showFollowers = () => {
  // TODO: 显示关注者列表
  ElMessage.info('关注者列表功能开发中...')
}

const showFollowing = () => {
  // TODO: 显示关注列表
  ElMessage.info('关注列表功能开发中...')
}

// 导航到详情页
const goToQuestionDetail = (question) => {
  router.push(`/question/${question.id}`)
}

const goToAnswerDetail = (answer) => {
  router.push(`/question/${answer.questionId}`)
}

const goToArticleDetail = (article) => {
  router.push(`/article/${article.id}`)
}

const goToColumnDetail = (column) => {
  router.push(`/column/${column.id}`)
}

const goToCollectionDetail = (collection) => {
  switch (collection.contentType) {
    case 1: // 问题
      router.push(`/question/${collection.id}`)
      break
    case 2: // 回答
      router.push(`/question/${collection.questionId}`)
      break
    case 3: // 文章
      router.push(`/article/${collection.id}`)
      break
  }
}

// 获取内容类型名称
const getContentTypeName = (contentType) => {
  const typeMap = {
    1: '问题',
    2: '回答',
    3: '文章'
  }
  return typeMap[contentType] || '内容'
}

// 加载更多
const loadMore = (tabName) => {
  const paginationInfo = pagination.value[tabName]
  if (!paginationInfo || paginationInfo.loading || !paginationInfo.hasMore) {
    return
  }

  const nextPage = paginationInfo.pageNum + 1
  loadTabContent(tabName, nextPage)
}
</script>

<style lang="scss" scoped>
.profile-page {
  min-height: 100vh;
  background: #f6f6f6;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
}

// 背景装饰
.profile-background {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 200px;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  z-index: 1;

  .bg-pattern {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-image:
      radial-gradient(circle at 20% 50%, rgba(255,255,255,0.1) 2px, transparent 2px),
      radial-gradient(circle at 80% 50%, rgba(255,255,255,0.1) 2px, transparent 2px);
    background-size: 100px 100px;
  }
}

// 用户信息头部
.profile-header {
  position: relative;
  z-index: 2;
  padding: 0px 24px 0;
  width: 100%;
  max-width: 1000px;

  .header-content {
    background: white;
    border-radius: 16px;
    padding: 32px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 32px;
  }
}

.user-main-info {
  display: flex;
  gap: 24px;
  flex: 1;
}

.avatar-section {
  position: relative;
  flex-shrink: 0;

  .user-avatar {
    border: 4px solid white;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
  }

  .vip-badge {
    position: absolute;
    bottom: -2px;
    right: -2px;
    width: 24px;
    height: 24px;
    background: linear-gradient(45deg, #ffd700, #ffed4e);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px solid white;
    color: #b8860b;
    font-size: 12px;
  }
}

.user-info {
  flex: 1;

  .name-section {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 8px;

    .user-name {
      font-size: 32px;
      font-weight: 700;
      color: #1a1a1a;
      margin: 0;
      line-height: 1.2;
    }

    .user-badges {
      display: flex;
      gap: 8px;

      .verified-badge {
        background: #52c41a;
        border: none;
        color: white;

        .el-icon {
          margin-right: 4px;
        }
      }

      .level-badge {
        background: #1890ff;
        border: none;
        color: white;
      }
    }
  }

  .user-headline {
    font-size: 16px;
    color: #666;
    line-height: 1.6;
    margin-bottom: 16px;
    max-width: 500px;
  }

  .user-meta {
    .meta-row {
      display: flex;
      gap: 24px;
      margin-bottom: 8px;

      &:last-child {
        margin-bottom: 0;
      }
    }

    .meta-item {
      display: flex;
      align-items: center;
      gap: 6px;
      font-size: 14px;
      color: #8590a6;

      .el-icon {
        font-size: 16px;
      }
    }
  }
}

.action-section {
  flex-shrink: 0;

  .action-buttons {
    display: flex;
    gap: 12px;

    .el-button {
      border-radius: 8px;
      font-weight: 500;

      &.el-button--large {
        padding: 12px 24px;
        font-size: 14px;
      }

      .el-icon {
        margin-right: 6px;
      }
    }
  }
}

// 数据统计
.stats-section {
  width: 100%;
  max-width: 1000px;
  margin: 24px 0 0;
  padding: 0 24px;

  .stats-container {
    background: white;
    border-radius: 12px;
    padding: 24px 32px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 48px;
  }

  .stat-item {
    text-align: center;
    cursor: pointer;
    transition: transform 0.2s ease;

    &:hover {
      transform: translateY(-2px);
    }

    .stat-number {
      font-size: 24px;
      font-weight: 700;
      color: #1a1a1a;
      margin-bottom: 4px;
    }

    .stat-label {
      font-size: 14px;
      color: #8590a6;
    }
  }

  .stat-divider {
    width: 1px;
    height: 32px;
    background: #e8e8e8;
  }
}

// 个人成就
.achievements-section {
  max-width: 1000px;
  margin: 24px auto 0;
  padding: 0 24px;

  .section-title {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 18px;
    font-weight: 600;
    color: #1a1a1a;
    margin-bottom: 16px;

    .el-icon {
      color: #ffa940;
    }
  }

  .achievements-list {
    background: white;
    border-radius: 12px;
    padding: 20px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
  }

  .achievement-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    background: #f8f9fa;
    border-radius: 8px;
    flex: 1;
    min-width: 200px;

    .achievement-icon {
      font-size: 24px;
    }

    .achievement-info {
      .achievement-name {
        font-size: 14px;
        font-weight: 600;
        color: #1a1a1a;
        margin-bottom: 2px;
      }

      .achievement-desc {
        font-size: 12px;
        color: #8590a6;
      }
    }
  }
}

// 个人简介区域
.profile-intro-section {
  width: 100%;
  max-width: 1000px;
  margin: 24px 0 0;
  padding: 0 24px;

  .intro-container {
    display: flex;
    justify-content: center;
  }

  .intro-card,
  .skills-card {
    background: white;
    border-radius: 16px;
    padding: 32px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
    width: 100%;

    .card-title {
      display: flex;
      align-items: center;
      gap: 8px;
      font-size: 18px;
      font-weight: 600;
      color: #1a1a1a;
      margin-bottom: 20px;

      .el-icon {
        color: #1890ff;
        font-size: 20px;
      }
    }
  }

  .intro-content {
    font-size: 14px;
    color: #666;
    line-height: 1.6;
  }

  .skills-list {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;

    .skill-tag {
      border: none;
      border-radius: 16px;
      padding: 6px 12px;
      font-size: 13px;

      &.el-tag--warning {
        background: #fff7e6;
        color: #fa8c16;
        border: 1px solid #ffd591;
      }

      &.el-tag--info {
        background: #f0f8ff;
        color: #1890ff;
        border: 1px solid #91d5ff;
      }

      .skill-count {
        margin-left: 4px;
        opacity: 0.8;
        font-size: 12px;
      }
    }
  }
}

// 内容导航
.content-nav {
  width: 100%;
  max-width: 1000px;
  margin: 24px 0 0;
  padding: 0 24px;

  .nav-container {
    background: white;
    border-radius: 12px 12px 0 0;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
    overflow: hidden;
  }

  .nav-tabs {
    display: flex;
    border-bottom: 1px solid #e8e8e8;
  }

  .nav-tab {
    flex: 1;
    padding: 16px 20px;
    text-align: center;
    cursor: pointer;
    transition: all 0.3s ease;
    border-bottom: 3px solid transparent;

    &:hover {
      background: #f8f9fa;
    }

    &.active {
      border-bottom-color: #B92B27;
      // border-bottom-color: #1890ff;
      background: #f0f8ff;

      .tab-label {
        color: #B92B27;
        // color: #1890ff;
        font-weight: 600;
      }

      .tab-count {
        // background: #1890ff;
        background: #B92B27;
        color: white;
      }
    }

    .tab-label {
      font-size: 16px;
      color: #1a1a1a;
      margin-right: 8px;
    }

    .tab-count {
      display: inline-block;
      padding: 2px 8px;
      background: #e8e8e8;
      color: #666;
      border-radius: 12px;
      font-size: 12px;
      min-width: 20px;
    }
  }
}

// 内容区域
.content-section {
  width: 100%;
  max-width: 1000px;
  margin: 0;
  padding: 0 24px 40px;

  .content-container {
    background: white;
    border-radius: 0 0 12px 12px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
    min-height: 400px;
  }

  .tab-content {
    padding: 32px;
  }

  .content-list {
    display: flex;
    flex-direction: column;
    gap: 16px;
  }

  .content-item {
    padding: 20px;
    border-radius: 8px;
    border: 1px solid #e8e8e8;
    cursor: pointer;
    transition: all 0.2s ease;

    &:hover {
      border-color: #1890ff;
      box-shadow: 0 2px 8px rgba(24, 144, 255, 0.1);
    }
  }

  .content-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 12px;

    .content-title {
      font-size: 16px;
      font-weight: 600;
      color: #1a1a1a;
      margin: 0;
      line-height: 1.4;
      flex: 1;
      margin-right: 16px;
      display: flex;
      align-items: center;
      gap: 8px;

      .content-type-badge {
        display: inline-block;
        padding: 2px 8px;
        background: #f0f8ff;
        color: #1890ff;
        border-radius: 12px;
        font-size: 12px;
        font-weight: 500;
      }
    }

    .content-meta {
      flex-shrink: 0;

      .content-time {
        font-size: 12px;
        color: #8590a6;
      }
    }
  }

  .content-summary {
    font-size: 14px;
    color: #666;
    line-height: 1.6;
    margin-bottom: 12px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }

  .content-stats {
    display: flex;
    gap: 16px;

    .stat-item {
      display: flex;
      align-items: center;
      gap: 4px;
      font-size: 12px;
      color: #8590a6;

      .el-icon {
        font-size: 14px;
      }
    }
  }

  .load-more-section {
    text-align: center;
    padding: 20px 0;
    border-top: 1px solid #f0f0f0;
    margin-top: 16px;

    .el-button {
      font-size: 14px;
      padding: 8px 24px;
    }
  }

  .empty-content {
    text-align: center;
    padding: 80px 20px;

    .empty-icon {
      font-size: 64px;
      margin-bottom: 16px;
      opacity: 0.6;
    }

    .empty-text {
      font-size: 18px;
      color: #1a1a1a;
      margin-bottom: 8px;
      font-weight: 500;
    }

    .empty-desc {
      font-size: 14px;
      color: #8590a6;
    }
  }
}

// 响应式设计
@media (max-width: 768px) {
  .profile-header {
    padding: 80px 16px 0;

    .header-content {
      flex-direction: column;
      text-align: center;
      padding: 24px;
    }
  }

  .user-main-info {
    flex-direction: column;
    align-items: center;
    text-align: center;
  }

  .action-section {
    width: 100%;

    .action-buttons {
      justify-content: center;
      flex-wrap: wrap;
    }
  }

  .stats-section {
    padding: 0 16px;

    .stats-container {
      gap: 24px;
      padding: 20px;
    }
  }

  .achievements-section,
  .profile-intro-section,
  .content-nav,
  .content-section {
    padding-left: 16px;
    padding-right: 16px;
  }



  .nav-tabs {
    flex-wrap: wrap;
  }

  .nav-tab {
    flex: none;
    min-width: 80px;
    padding: 12px 16px;

    .tab-label {
      font-size: 14px;
    }
  }
}
</style>
